<template>
    <!-- 判断：当列表没有任务时，则不显示底部信息 -->
    <div class="todo-footer" v-show="todoTotal > 0">
        <label>
        <!-- 1、当列表任务全部完成时，则自动勾选 2、当点击全选勾选框时，列表所有任务都勾选 -->
        <!-- <input type="checkbox" :checked="isAll" @click="checkAll"/> -->
        <input type="checkbox" v-model="isAll"/>
        </label>
        <span>
        <!-- 通过两个计算属来性控制已完成和全部任务的数量 -->
        <span>已完成{{isFinishTotal}}</span> / 全部{{todoTotal}}
        </span>
        <button class="btn btn-danger" @click="clearAllTodo">清除已完成任务</button>
    </div>
</template>

<script>
    export default {
        name:'TodoFooter',
        props:['todoList','checkAllTodo','deleteAllTodo'],
        computed:{
            //任务总数
            todoTotal(){
                return this.todoList.length;
            },

            //已完成的任务数量
            isFinishTotal(){
                /*三种方法*/
                //  return this.todoList.filter(todo => todo.isFinish).length;

                //声明一个变量用于保存todo完成数量
                // let i = 0;
                // //遍历数组（todo为true则i++）
                // this.todoList.forEach((todo)=>{
                //     if(todo.isFinish) i++;
                // });
                // //最后返回总数给当前属性
                // return i;

                /*
                    使用reduce()方法：
                        参数1：箭头函数形式 ()=>{} （数组长度是多少，函数就会被调用多少次）
                            参数1下的第一个参数（pre）：该参数初始值默认为参数2定义的初始值（0），可用于做条件判断，需要return回去
                            参数1下的第二个参数（current）：current的值是当前数组里的每一个对象，参数名可随意；
                        参数2：初始值（统计的初始值）
                */
                return this.todoList.reduce((pre,todo)=>{return pre + (todo.isFinish ? 1 : 0)}, 0);
            },

            //实现任务是否全部完成的判断 以及 全选 和 全不选）
            isAll:{
                get(){
                    //但凡有一个不完成则不勾选，全部完成则勾选，加上总数是否大于零的判断（否则列表没有一个任务时勾选框也会勾上）
                    return this.isFinishTotal === this.todoTotal && this.todoTotal > 0;   //返回布尔值
                },
                
                //通过计算属性set函数来监视数据（勾选框）是否发生改变，当勾选框发生改变时，则调用set函数。
                set(value){
                    //通知App组件改变所有任务的状态，通过当前勾选框的状态来改变（value为布尔值）
                    this.checkAllTodo(value); 
                }
            }
        },
        methods:{
            //勾选所有任务（全选）
            // checkAll(e){
            //     //通知App组件改变所有任务的状态，通过当前勾选框的状态来改变（传递一个布尔值）
            //     this.checkAllTodo(e.target.checked);
            // }

            //清除所有已完成的任务
            clearAllTodo(){
                //弹窗提示是否确定删除
                if(confirm('确定删除吗？')){
                    //通知App组件删除所有已完成的任务
                    this.deleteAllTodo();
                }
            }
        }
    }
</script>

<style scoped>
    /*footer*/
    .todo-footer {
        height: 40px;
        line-height: 40px;
        padding-left: 6px;
        margin-top: 5px;
    }

    .todo-footer label {
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
    }

    .todo-footer label input {
        position: relative;
        top: -1px;
        vertical-align: middle;
        margin-right: 5px;
    }

    .todo-footer button {
        float: right;
        margin-top: 5px;
    }
</style>